<script setup>
import { useShopStore, useUserStore, useOrderStore } from '@/stores/index'
import { baseURL } from '@/utils/request'
import { WarnTriangleFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import router from '@/router'
import { ref, inject } from 'vue'

const getGame = inject('getGame')
const shopStore = useShopStore()
const userStore = useUserStore()
const orderStore = useOrderStore()
const orderList = ref({
  id: 1,
  goodId: '',
  goodname: '',
  goodprice: 100,
  paytype: 1,
  goodcategory: '',
  gooddescription: '',
  createtime: new Date().toISOString(), // 使用 ISO 格式的时间字符串
  gameId: 0,
  shopstatic: 0,
  userId: 0,
  busId: 0,
  username: 'user',
  image: '',
  link: ''
})

shopStore.getShopList(userStore.user.id)
//计算总价钱、

const totalPrice = () => {
  let total = 0
  for (let i = 0; i < shopStore.shopList.length; i++) {
    total += parseFloat(shopStore.shopList[i].price)
  }
  return total.toFixed(2)
}
const deleteCart = async (id) => {
  await ElMessageBox.confirm(`你确定要删除吗?`, '温馨提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    icon: WarnTriangleFilled,
    draggable: true
  })
  await shopStore.removeFromCart(id)
  shopStore.getShopList(userStore.user.id)
  getGame()
}

//清空购物车
const clearCart = async () => {
  await ElMessageBox.confirm(`你确定要清空购物车吗?`, '温馨提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    icon: WarnTriangleFilled,
    draggable: true
  })

  //遍历购物车列表，删除每一个商品
  for (let i = 0; i < shopStore.shopList.length; i++) {
    await shopStore.removeFromCart(shopStore.shopList[i].id)
  }
  shopStore.getShopList(userStore.user.id)
  getGame()
}

//添加订单
const addToOrder = async () => {
  await ElMessageBox.confirm(`你确定要提交订单吗?`, '温馨提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    icon: WarnTriangleFilled,
    draggable: true
  })
  //购物车的数组对象遍历依次加入到订单列表

  for (let i = 0; i < shopStore.shopList.length; i++) {
    orderList.value.id = shopStore.shopList[i].id
    orderList.value.goodId = shopStore.shopList[i].gameId
    orderList.value.goodname = shopStore.shopList[i].game_name
    orderList.value.goodprice = shopStore.shopList[i].price
    orderList.value.goodcategory = shopStore.shopList[i].category
    orderList.value.gooddescription = shopStore.shopList[i].game_description
    orderList.value.gameId = shopStore.shopList[i].gameId
    orderList.value.shopstatic = shopStore.shopList[i].is_purchased
    orderList.value.userId = shopStore.shopList[i].userId
    orderList.value.busId = shopStore.shopList[i].busId
    orderList.value.username = userStore.user.name
    orderList.value.image = shopStore.shopList[i].game_image
    orderList.value.link = shopStore.shopList[i].link
    orderList.value.createtime = new Date().toISOString()
    console.log(orderList.value)
    await orderStore.addOrder(orderList.value)
    console.log(shopStore.shopList[i])
    await shopStore.removeFromCart(shopStore.shopList[i].id)
  }
  await shopStore.getShopList(userStore.user.id)

  ElMessage.success('订单提交成功')

  //清空购物车
  await getGame()

  router.push('/unpayorder')
}
</script>

<template>
  <div class="new_shopcar">
    <!-- 顶部购物车 -->
    <div class="newshopcar_top center">
      <!-- 左侧购物车标识 -->
      <div class="title_h">
        <div class="iconfont">
          <el-icon><ShoppingCart /></el-icon>
        </div>
        <div class="bt">
          <p>我的购物车</p>
          <span>部分商品因站点不同请切换后进行付款</span>
        </div>
      </div>
      <!-- 右侧清空按钮 -->
      <div class="flex1">
        <ul>
          <li>
            <a class="box remove" @click="clearCart()">
              <div class="iconfont"></div>
              <p>一键清空</p>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <!-- 订单列表-->
    <div class="center" v-if="shopStore.shopList.length > 0">
      <!-- 购物列表 -->
      <div class="shopcart">
        <!-- 订单列表 -->
        <div class="cartlist active">
          <div class="tile">
            <div class="link_a">
              <a href="#" class="on">游戏商品</a>
              <a href="#">其他商品</a>
            </div>
          </div>
          <!-- 商品列表 -->
          <ul v-for="item in shopStore.shopList" :key="item.id">
            <li>
              <div class="ckbox">
                <input type="checkbox" value="on" />
              </div>
              <!-- 商品图片 -->
              <a href="#" target="_blank" class="img"
                ><img
                  :src="baseURL + '/files/' + item.game_image"
                  alt="{{ item.game_name }}"
                  style="display: inline"
              /></a>
              <!-- 商品信息 -->
              <div class="infor">
                <a href="#" target="_blank" class="name">{{ item.game_name }}</a>
                <p>{{ item.category }}</p>
              </div>

              <!-- 商品属性 -->
              <div class="lablx">
                <p>类型：安装包</p>
              </div>
              <!-- 商品价格 -->
              <div class="Pricelis">
                <div class="Price">
                  ¥<i>{{ parseFloat(item.price).toFixed(2) }}</i>
                </div>
                <div class="hkPrice">
                  HK$<i>{{ (item.price * 1.0858).toFixed(2) }}</i>
                </div>
              </div>
              <div class="close" @click="deleteCart(item.id)">删除</div>
            </li>
          </ul>

          <!-- 底部全选，折扣，优惠券 -->
          <!-- 全选 -->
          <div class="selectallbox">
            <!-- 全选框 -->
            <div class="select_all">
              <div class="select_">
                <input type="checkbox" id="select_all" value="1" />
              </div>
              <div class="">全选</div>
            </div>

            <!-- 右侧折扣，优惠券 -->
            <div class="hidetab">
              <!-- 折扣 -->
              <p class="jf">
                <label for="couponjf"
                  ><input type="checkbox" name="couponjf" value="0" class="couponjf" /> 积分抵扣：<i
                    >0</i
                  ></label
                >
              </p>
              <!-- 优惠券 -->
              <div class="coupontext">
                <div class="bt_">优惠券共计 -<span>0</span></div>
                <div class="coupon">选择优惠券</div>
              </div>
            </div>
          </div>
          <!-- 优惠券 -->
          <div class="couponbox">
            <div class="titlebt">
              <div class="bt">
                <span class="on">可用优惠卷</span>
                <span>不可用优惠卷</span>
              </div>
            </div>
            <div class="list">
              <div class="item select">
                <div class="tishi">暂无优惠卷</div>
              </div>
              <div class="item">
                <div class="li">
                  <div class="number">￥<span>3</span>.0</div>
                  <div class="tex">
                    <p>暑期史低通券</p>
                    <span>2024/07/12 - 2024/08/12</span>
                  </div>
                  <div class="lab"><span>暑期史低通券</span></div>
                  <div class="ico"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 确认付款 -->
        <div class="cartpayment">
          <div class="clear_">
            <!-- 左边信息 -->
            <div class="cartform">
              <div class="inputlis">
                <div class="bt"><i></i>联系方式：</div>
                <div class="input">
                  <input type="text" placeholder="选填" class="Telephone textval" value="" />
                </div>
              </div>
              <div class="inputlis">
                <div class="bt">备注信息：</div>
                <div class="input">
                  <input type="text" placeholder="选填" class="remarks textval" value="备注" />
                </div>
              </div>
            </div>
            <!-- 右边支付方式，及价格 -->
            <div class="payment">
              <div class="p">
                优惠卷：<span>¥<i class="coupon">0</i></span>
              </div>
              <div class="p jifentext">
                积分抵扣：<span>¥<i class="Pricejf">0</i></span>
              </div>
              <div class="paymenttotal">
                <div class="bt">付款总额：</div>
                <div class="number">
                  <p class="lis lis1">
                    ¥<span class="mainland" id="mainlandPrice">{{ totalPrice() }}</span>
                  </p>
                  <p class="lis lis2">
                    HK$<span class="HK" id="HKPrice">{{ (totalPrice() * 1.0858).toFixed(2) }}</span>
                  </p>
                </div>
              </div>
              <div class="botpaylab">
                <!-- 支付方式 -->
                <div class="mode">
                  <p class="al" data-typle="al" data-name="支付宝">
                    <i class="icoimg_h"></i>
                  </p>
                  <p class="wx on" data-typle="wx" data-name="微信">
                    <i class="icoimg_h"></i>
                  </p>
                </div>
                <!-- 确认按钮 -->
                <a href="javascript:void(0)" class="btn on" @click="addToOrder()">确认付款</a>
              </div>
            </div>
          </div>
          <!-- 底部提示 -->
          <div class="botpayment">
            <div class="texflex">
              付款完成：激活码自动发货，可在<a @click="$router.push('/myorder')" target="_blank"
                >订单列表</a
              >中查看。
            </div>
          </div>
        </div>
      </div>
    </div>
    <template v-else>
      <el-empty description="您还没有添加订单" />
    </template>
  </div>
</template>

<style lang="scss" scoped>
.new_shopcar {
  padding-top: 40px;
  width: 1240px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 20px;
  height: 100%;

  .newshopcar_top.center {
    padding: 0 40px;
    display: flex;
    .title_h {
      display: flex;
      .iconfont {
        font-size: 70px;
      }
      .bt {
        margin-left: 20px;
        p {
          font-size: 32px;
          margin-top: 5px;
          margin-bottom: 5px;
        }
        span {
          font-size: 14px;
        }
      }
    }
    .flex1 {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      ul {
        display: flex;
        li {
          margin-right: 20px;
          a {
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 140px;
            height: 50px;
            border: 1px solid #e5e5e5;
            border-radius: 25px 0 25px 0;
            background: linear-gradient(#33bdef, #019ad2);
            border-width: 1px;
            color: #ffffff;
            border-color: #057fd0;
            font-weight: bold;
            transition: all 0.5s ease;
            &:hover {
              background: linear-gradient(#019ad2, #33bdef);
              transform: scale(0.95);
            }
            p {
              font-size: 16px;
            }
          }
        }
      }
    }
  }
  .center {
    .shopcart {
      .cartlist.active {
        .tile {
          margin-bottom: 25px;
          .link_a {
            display: flex;
            margin-left: 20px;
            .on {
              font-size: 28px;
              font-weight: bold;
            }
            a {
              margin-right: 20px;
              line-height: 28px;
              font-size: 20px;
            }
          }
        }
        ul {
          margin: 20px;
          border-radius: 20px;
          height: 160px;
          background-color: rgb(245, 248, 250);
          padding: 15px;
          li {
            display: flex;
            .ckbox {
              display: flex;
              margin: auto 10px;
            }
            a {
              img {
                width: 274px;
                height: 128px;
                object-fit: cover;
                border-radius: 10px;
                transition: all 0.5s ease;
                &:hover {
                  transform: scale(0.95);
                }
              }
            }
            .infor {
              margin: auto 10px;
            }
            .lablx {
              margin: auto 10px;
              margin-left: auto;
            }
            .Pricelis {
              margin: auto 30px;
              font-size: 20px;
              i {
                all: unset;
              }
              .Price {
                color: #ff6630;
              }
            }
            .close {
              margin: auto 10px;
              cursor: pointer;
              &:hover {
                color: #ff6630;
              }
            }
          }
        }
        .selectallbox {
          margin: 40px 45px;
          display: flex;
          .select_all {
            display: flex;
          }
          .hidetab {
            display: flex;
            margin-left: auto;
            .jf {
              margin-right: 20px;
              i {
                all: unset;
              }

              .couponjf {
                margin: auto 2px;
              }
            }
            .coupontext {
              display: flex;
              width: 300px;
              justify-content: space-between;
              padding: 0 20px;
              background-color: rgb(245, 248, 250);
              border-radius: 20px;
              //垂直居中
              align-items: center;
              color: #ff6630;
            }
          }
        }
        .couponbox {
          display: flex;
          display: none;
        }
      }
      .cartpayment {
        padding-bottom: 5px;
        .clear_ {
          margin: 0 20px;
          justify-content: space-between;
          display: flex;
          .cartform {
            width: 600px;
            .inputlis {
              display: flex;
              margin-bottom: 20px;
              .bt {
                margin: auto 0;
              }
              .input {
                input {
                  width: 400px;
                  height: 50px;
                  border-radius: 10px;
                  padding-left: 5px;
                  font-size: 18px;
                }
              }
            }
          }
          .payment {
            width: 360px;
            margin-right: 20px;
            margin-bottom: 30px;
            .p {
              padding-left: 120px;
            }
            .paymenttotal {
              display: flex;
              padding-left: 32px;
              .bt {
                margin: auto 0;
                padding-right: 10px;
              }
              .number {
                .lis.lis1 {
                  font-size: 32px;
                  margin-bottom: 0;
                  color: #ff6630;
                }
                .lis.lis2 {
                  font-size: 24px;
                  margin-top: 0;
                }
              }
            }
            .botpaylab {
              display: flex;
              .btn.on {
                width: 160px;
                height: 50px;
                margin-left: auto;
                background-color: #ff6630;
                text-align: center;
                line-height: 50px;
                color: #ffffff;
                border-radius: 25px;
                margin-right: 60px;
                margin-top: 20px;
                font-size: 20px;
                transition: all 0.5s ease;
                border: 1px solid #ffffff;
                &:hover {
                  background-color: #ff3300;
                  border: 1px solid #186690;
                  transform: scale(0.95);
                }
              }
            }
          }
        }
        .botpayment {
          .texflex {
            margin-left: 20px;
            margin-bottom: 20px;
            a {
              color: #ff6630;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
